<template>
  <el-dialog title="检查详情" :visible.sync="show" append-to-body width="1000px" @closed="closed">
    <div class="container">
      <el-timeline style="padding: 0 10px">
        <el-timeline-item v-for="item in inspections" :key="item.inspectionId" :timestamp="item.createTime" placement="top" :color="item.isProblem ? '#f56c6c' : '#409eff'">
          <el-card>
            <el-descriptions size="small" :label-style="{ width: '80px' }" border>
              <el-descriptions-item label="检查部位">{{ item.positionName }}</el-descriptions-item>
              <el-descriptions-item label="问题类型">{{ item.patrolTypeName }}</el-descriptions-item>
              <el-descriptions-item label="经纬度">{{ item.longitude && item.latitude ? `${item.longitude},${item.latitude}` : '' }}</el-descriptions-item>
              <el-descriptions-item label="巡查结果">
                <dict-tag :options="inspectResultList" :value="item.isProblem" />
              </el-descriptions-item>
              <el-descriptions-item label="问题级别">
                <dict-tag :options="dict.type.cq_route_inspection_serious_level" :value="item.seriousLevel" />
              </el-descriptions-item>
              <el-descriptions-item label="整改期限">{{ item.dealine ? `${item.dealine}天` : '' }}</el-descriptions-item>
              <el-descriptions-item label="描述" :span="3">{{ item.description }}</el-descriptions-item>
              <el-descriptions-item label="现场情况" :span="3">
                <MediaList :list="item.picList" />
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-dialog>
</template>
<script>
// 检查详情
import { inspectResultList } from '../utils/common'
import MediaList from './MediaList'
export default {
  dicts: ['cq_route_inspection_serious_level'],
  components: { MediaList },
  data() {
    return {
      inspectResultList,
      show: false,
      info: {},
      inspections: []
    }
  },
  methods: {
    closed() {
      this.info = {}
      this.inspections = []
    },
    open(data) {
      this.show = true
      this.info = data
      this.inspections = data.inspections || []
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  max-height: calc(88vh - 100px);
  overflow-y: auto;
  margin-top: -20px;
}
</style>
